<template>
  <div class="alarm-container">
    <!-- 1. 顶部标签页 -->
    <el-tabs v-model="activeTab" class="alarm-tabs">
      <el-tab-pane label="实时告警" name="realtime" />
      <el-tab-pane label="静默告警" name="silent" />
      <el-tab-pane label="历史告警" name="history" />
      <el-tab-pane label="图片上传" name="upload" />
      <el-tab-pane label="时间计划" name="schedule" />
      <el-tab-pane label="人口分布地图" name="map" />
    </el-tabs>

    <!-- 图片上传页面 -->
    <div v-if="activeTab === 'upload'" style="padding: 40px; background: #fff;">
      <ImageUploadDemo />
    </div>

    <!-- 时间计划页面 -->
    <div v-else-if="activeTab === 'schedule'" style="padding: 20px; background: #fff;">
      <WeeklyGanttChart />
    </div>

    <!-- 人口分布地图页面 -->
    <div v-else-if="activeTab === 'map'" style="height: calc(100vh - 120px); background: #fff;">
      <ChinaMapTest />
    </div>

    <!-- 2. 筛选区域 -->
    <div v-else class="filter-bar">
      <el-select v-model="timeRangeType" placeholder="自定义" style="width: 120px">
        <el-option label="自定义" value="custom" />
        <el-option label="近1小时" value="1h" />
        <el-option label="近24小时" value="24h" />
      </el-select>

      <el-date-picker
        v-model="dateRange"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        format="YYYY-MM-DD HH:mm"
        value-format="YYYY-MM-DD HH:mm"
        style="margin-left: 10px; width: 350px"
      />

      <el-input
        v-model="searchKeyword"
        placeholder="请输入告警资源ID"
        style="margin-left: 10px; width: 240px"
        clearable
      >
        <template #append>
          <el-button :icon="Search" />
        </template>
      </el-input>
    </div>

    <!-- 3. 告警列表表格 -->
    <el-table :data="alarmList" border stripe style="width: 100%">
      <el-table-column prop="resourceId" label="告警资源ID/名称" min-width="150">
        <template #default="{ row }">
          <el-link type="primary" :underline="false" @click="handleResourceClick(row.resourceId)">
            {{ row.resourceId }}
          </el-link>
        </template>
      </el-table-column>

      <el-table-column prop="ruleName" label="规则名称" min-width="200">
        <template #default="{ row }">
          <el-link type="primary" :underline="false" @click="handleRuleClick(row.ruleName)">
            {{ row.ruleName }}
          </el-link>
        </template>
      </el-table-column>

      <el-table-column
        prop="productType"
        label="产品类型"
        width="120"
        :filters="productTypeFilters"
        :filter-method="filterProductType"
      >
        <template #default="{ row }">
          <el-tag>{{ row.productType }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="status" label="状态" width="100">
        <template #default="{ row }">
          <span :class="getStatusClass(row.status)">{{ row.status }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="level" label="级别" width="80">
        <template #default="{ row }">
          <span :class="getLevelClass(row.level)">{{ row.level }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="alarmType" label="告警类型" width="120" />

      <el-table-column prop="alarmTime" label="告警时间" width="160" />

      <el-table-column prop="updateTime" label="更新时间" width="160" />

      <el-table-column prop="duration" label="告警持续" width="100" />

      <el-table-column label="操作" width="80" fixed="right">
        <template #default="{ row }">
          <el-button type="text" size="small" @click="handleReset(row)">
            复位
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Search } from '@element-plus/icons-vue';
import ImageUploadDemo from '@/views/ImageUploadDemo.vue';
import WeeklyGanttChart from '@/components/WeeklyGanttChart.vue';
import ChinaMapTest from '@/components/ChinaMapTest.vue';

// --- 响应式数据 ---
const activeTab = ref('realtime');
const timeRangeType = ref('custom');
const dateRange = ref(['2025-10-13 11:41', '2025-10-14 15:41']);
const searchKeyword = ref('');

const alarmList = ref([
  {
    resourceId: 'infrastack',
    ruleName: 'METADB可用性',
    productType: 'METADB',
    status: '告警发生',
    level: '严重',
    alarmType: '阈值告警',
    alarmTime: '2025-08-19 16:20:23',
    updateTime: '2025-10-14 15:04:05',
    duration: '55天',
  },
  {
    resourceId: 'pxc-aarpoik3geah1fkeig-cn',
    ruleName: 'PolarDB-X 计算节点活跃会话数超阈值',
    productType: 'PolarDB-X',
    status: '告警发生',
    level: '严重',
    alarmType: '阈值告警',
    alarmTime: '2022-09-23 16:16:48',
    updateTime: '2025-10-14 15:04:00',
    duration: '20天',
  },
]);

// 产品类型筛选选项
const productTypeFilters = ref([
  { text: 'AnalyticDB PostgreSQL', value: 'AnalyticDB PostgreSQL' },
  { text: 'GraphDB', value: 'GraphDB' },
  { text: 'Host', value: 'Host' },
  { text: 'Lindorm', value: 'Lindorm' },
  { text: 'METADB', value: 'METADB' },
  { text: 'PolarDB-X', value: 'PolarDB-X' },
  { text: 'Proxy', value: 'Proxy' },
]);

// --- 方法 ---
const handleReset = (row) => {
  ElMessageBox.confirm(`确定要复位告警 "${row.resourceId}" 吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      // 这里可以调用API执行复位操作
      ElMessage({
        type: 'success',
        message: '复位成功!',
      });
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消复位',
      });
    });
};

const handleResourceClick = (id) => {
  ElMessage(`点击了资源ID: ${id}`);
  console.log('Navigate to resource detail:', id);
};

const handleRuleClick = (name) => {
  ElMessage(`点击了规则: ${name}`);
  console.log('Navigate to rule detail:', name);
};

// --- 筛选方法 ---
const filterProductType = (value, row) => {
  return row.productType === value;
};

// --- 样式辅助函数 ---
const getStatusClass = (status) => {
  return status === '告警发生' ? 'status-error' : 'status-normal';
};

const getLevelClass = (level) => {
  return level === '严重' ? 'level-critical' : 'level-normal';
};
</script>

<style scoped>
.alarm-container {
  padding: 20px;
  background-color: #f0f2f5;
  min-height: 100vh;
}

.alarm-tabs {
  background-color: #fff;
  padding: 0 20px;
  border-radius: 4px 4px 0 0;
}

.filter-bar {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  background-color: #fff;
  border-bottom: 1px solid #eaeef2;
}

/* 状态和级别的颜色 */
.status-error,
.level-critical {
  color: #f56c6c;
  font-weight: bold;
}

.type-text,
.time-text,
.duration-text {
  color: #909399;
}

/* 使用 :deep() 穿透Element Plus组件的样式 */
:deep(.el-table) {
  background-color: #fff;
  border-radius: 0 0 4px 4px;
}

:deep(.el-table__header) th {
  background-color: #fafafa;
  color: #333;
  font-weight: 600;
}

:deep(.el-table__row) {
  &:hover > td {
    background-color: #f5f7fa !important;
  }
}

:deep(.el-link) {
  font-size: 14px;
}
</style>
